{% extends 'layout.html' %}

{% block content %}
<div class="container">
    <div style="margin-bottom:10px ;">
        <input type="button" value="新建订单" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
        <input id="btnAdd" type="button" value="新建订单JS" class="btn btn-primary">
    </div>

</div>


<!-- 弹出框Add-->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">新建</h4>
            </div>
            <div class="modal-body">

                <form id="formAdd" novalidate>
                    {% for field in form %}
                    <div class="form-group">
                        <label>{{field.label}}</label> {{field}}
                        <span class="error-msg" style="color: red; position:absolute;"></span>
                    </div>
                    {% endfor %}
                </form>
            </div>
            <div class="modal-footer">
                <button id="btnClose" type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="btnSave" type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 弹出框Delete-->
<!-- Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">

        <div class="alert alert-danger alert-dismissible fade in" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                    aria-hidden="true">×</span></button>
            <h4>确定要删除订单吗？</h4>
            <p style="margin:10px 0 ;">注意：订单相关信息都会被一起删除</p>
            <p style="text-align: right;">
                <button id="btnConfirmDelete" type="button" class="btn btn-danger">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </p>
        </div>


    </div>
</div>

<!-- 弹出框Edit-->
<!-- Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title"> 编辑</h4>
                 
            </div>
            <div class="modal-body">

                <form id="formEdit" novalidate>
                    {% for field in form %}
                    <div class="form-group">
                        <label>{{field.label}}</label> {{field}}
                        <span class="error-edit-msg" style="color: red; position:absolute;"></span>
                    </div>
                    {% endfor %}
                </form>
            </div>
            <div class="modal-footer">
                <button  type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="btnConfirmEdit" type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 以下为表格显示部分，含分页 -->

<div class="container">
    <div>
        <div class="bs-example" data-example-id="panel-without-body-with-table">
            <div class="panel panel-default">
                <!-- Default panel contents -->
                <div class="panel-heading">
                    <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
                    订单列表
                </div>
                <!-- Table -->
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>订单号</th>
                            <th>标题</th>
                            <th>价格</th>
                            <th>状态</th>
                            <th>用户</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {%for obj in queryset%}
                        <tr>
                            <th scope="row">{{obj.id}}</th>
                            <td>{{obj.oid}}</td>
                            <td>{{obj.title}}</td>
                            <td>{{obj.price}}</td>
                            <td>{{obj.get_status_display}}</td>
                            <!-- 下面我写obj.user似乎也没问题 -->
                            <td>{{obj.admin.username}}</td>

                            <td>
                                <!-- <a class="btn btn-primary btn-xs" href="/depart/edit/?nid={{obj.id}}">编辑</a> -->
                                <!-- <a class="btn btn-primary btn-xs" href="#">编辑</a> -->
                                <input uid="{{obj.id}}" type="button" class="btn btn-primary btn-xs btn-edit" value="编辑">
                                <!-- <a class="btn btn-danger btn-xs" href="#">删除</a> -->
                                <input uid="{{obj.id}}" type="button" class="btn btn-danger btn-xs btn-delete" value="删除">
                            </td>
                        </tr>
                        {%endfor%}
                    </tbody>
                </table>
            </div>
        </div>

        <div class="container">
            <!-- <!—HTML中分页导航开始： 这部分内容基本不用改，传过来的统一要用queryset命名--> -->
            <div class="pagination" style="margin-top:1px ;">
                <span class="step-links">
                    {% if queryset.has_previous %}
                    <a href="?page=1">&laquo; 首页</a>
                    <a href="?page={{ queryset.previous_page_number }}">上一页</a>
                    {% endif %}

                    <span class="current">
                        第 {{ queryset.number }} 页 / 共 {{ paginator.num_pages }} 页
                    </span>

                    {% if queryset.has_next %}
                    <a href="?page={{ queryset.next_page_number }}">下一页</a>
                    <a href="?page={{ paginator.num_pages }}">末页 &raquo;</a>
                    {% endif %}
                </span>

                <!-- 跳转输入框 -->
                <form method="get" style="display: inline-block; margin-left: 20px;">
                    <input type="number" name="page" min="1" max="{{ paginator.num_pages }}"
                        value="{{ articles.number }}" style="width: 50px; padding: 4px;">
                    <button type="submit">跳转</button>
                </form>

            </div>
            <!-- 分页导航结束-->
        </div>

    </div>
</div>

    {% endblock %}


    {% block js %}
    <script type="text/javascript">
        // 定义一个全局变量，存待删除行id
        var DELETE_ID;
        var EDIT_ID; //全局变量，存编辑行id

        $(function () {
            bindBtnAddEvent();
            bindBtnSaveEvent();
            bindBtnDeleteEvent();
            bindBtnConfirmDeleteEvent();
            bindBtnEditEvent();
            bindBtnConfirmEditEvent();
        })
        function bindBtnAddEvent() {
            $("#btnAdd").click(function () {
                $("#myModal").modal('show')

            });
        }
        function bindBtnSaveEvent() {
            $("#btnSave").click(function () {
                // 提前清空一下错误信息
                $(".error-msg").empty();

                $.ajax({
                    url: '/order/add/',
                    type: "post",
                    data: $("#formAdd").serialize(),
                    dataType: "json",
                    success: function (res) {
                        if (res.status) {
                            // alert("添加成功！");可以不要这句   
                            // 提交成功后，清空输入表单。[0]可以理解为把JQuery对象转换为DOM对象
                            $("#formAdd")[0].reset();
                            // 关闭对话框,如没有上面这行，是会自动关闭的，但是有上面行，则不会关闭了
                            $("#myModal").modal('hide')
                            location.reload();

                        } else {
                            // 循环获取每一条错误信息并显示
                            $.each(res.error, function (name, data) {
                                $("#id_" + name).next().text(data[0]);
                            })
                        }

                    }
                })
            })
        }
        function bindBtnDeleteEvent() {
            $(".btn-delete").click(function () {
                $("#deleteModal").modal('show');
                DELETE_ID = $(this).attr("uid");
                console.log(DELETE_ID)
            })
        }
        function bindBtnConfirmDeleteEvent() {
            $("#btnConfirmDelete").click(function () {
                $.ajax({
                    // url:'/order/'+ DELETE_ID + '/delete/',    //拼接字符串url:/order/12/delete/,下面不用写data了
                    url: '/order/delete/',    //按这种写法，下面就要写data, 这样拼成的url:/order/delete/?uid=12
                    type: "get",
                    dataType: "json",
                    data: {
                        uid: DELETE_ID
                    },
                    success: function (res) {
                        if (res.status) {

                            location.reload();
                        } else {
                            alert(res.error)
                        }

                    }
                })
            })
        }
        function bindBtnEditEvent() {
                $(".btn-edit").click(function () {
                    $(".error-edit-msg").empty();  //清空错误信息
                    EDIT_ID = $(this).attr("uid");  //获取点击按键的uid,传给后端

                    $.ajax({
                        url: '/order/edit/',
                        type: "get",
                        dataType: "json",
                        data: {
                            uid: EDIT_ID
                        },
                        success: function (res) {
                            if (res.status) {
                                $.each(res.data, function (name, value) {
                                    // 因为edit,add两个弹窗结构相同，有相同的字段id名，因此要根据窗口 id="editModal" 找
                                    $("#editModal").find("#id_" + name).val(value); 
                                })
                                    // 返回True，前端收到了数据，才弹窗
                                $("#editModal").modal('show');
                                // location.reload();
                            } else {
                                alert(res.error)
                            }
                        }

                    })


                });
            }
        function bindBtnConfirmEditEvent() {                
                $("#btnConfirmEdit").click(function () {              
                    
                    $.ajax({
                        url: '/edit/confirm/' + '?uid=' + EDIT_ID,
                        type: "post",
                        data: $("#formEdit").serialize(),
                        dataType: "json",
                        success: function (res) {
                            if (res.status) {
                                // 提交成功后，清空输入表单。[0]可以理解为把JQuery对象转换为DOM对象
                                $("#formEdit")[0].reset();
                                // 关闭对话框,如没有上面这行，是会自动关闭的，但是有上面行，则不会关闭了
                                $("#editModal").modal('hide')
                                location.reload();

                            } else {
                                if (res.tips) {
                                    alert(res.tips)   
                                } else {
                                    $.each(res.error, function (name, data) {
                                        $("#editModal").find("#id_" + name).next().text(data[0]);
                                    })

                                }

                            }
                        }

                    })


                })

            }

            
    </script>
    {% endblock %}